<template>
  <div class="footer">
    <div class="footer_wrap">
      <div class="form_container">
        <p class="free">免费获取解决方案</p>
        <p class="phone">
          <span class="description"
            >没找到您想要的信息？可以直接拨打 7*12小时一对一资深技术支持
            热线：</span
          >
          <span class="phone_num">{{landline}}</span>
        </p>
        <div class="form">
          <input
            type="text"
            v-model="form.wevsite_name"
            placeholder="公司名称*"
            class="input_item"
          />
          <input
            type="text"
            v-model="form.user_name"
            placeholder="联系人*"
            class="input_item"
          />
          <input
            type="tel"
            v-model="form.mobile"
            placeholder="联系方式*"
            class="input_item"
          />
          <input
            type="text"
            v-model="form.text"
            placeholder="需求描述*"
            class="input_item"
          />
          <input type="button" value="提交" class="button" @click="addForm" />
        </div>
      </div>
    </div>

    <div class="footer_info_container">
      <div class="footer_info">
        <div class="footer_left">
          <!-- <p class="footer_title">关于我们 | 联系我们</p> -->
          <p class="company_name">公司名称：{{website_name}}</p>
          <p class="company_phone">联系电话：{{mobile}}</p>
          <p class="address">公司地址：{{ address }}</p>
          <p class="copyright">{{copyright}}</p>
          <p class="aq">{{ipc}}-1</p>
        </div>
        <div class="amap-wrapper">
          <el-amap class="amap-box" :vid="'amap-vue'" :center="center" :zoom="zoom" :showMarker='true' :isCustom='true'></el-amap>
        </div>
        <div class="footer_right">
          <!-- <img src="@/assets/images/network-security.png" alt="" class="img_item"/> -->
          <div class="img_erweima">
            
          </div>
          
          <div>
            <img src="@/assets/images/credible.png" alt="" class="img_item" />
            <img src="@/assets/images/manage.png" alt="" class="img_item" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getWebsiteData,
  addFormData,
  getWebsiteTuData,
  addFormDatas,
} from "@/api/getData";
export default {
  name: "Footer",
  data() {
    return {
      form: {
        wevsite_name: "",
        user_name: "",
        mobile: "",
        text: "",
      },
      address: "",
      copyright: "",
      ipc: "",
      landline: "",
      mobile: "",
      qr_code: "",
      title: "",
      website_logo: "",
      website_name: "",
      center:[104.059441,30.551762],
      zoom:15
    };
  },
  created() {
    this.getWebsiteDataList();
    // this.getWebsiteDataLists();
  },
  methods: {
    // 获取官网数据
    async getWebsiteDataList() {
      try {
        const res = await getWebsiteData({}).then((res) => {
          // console.log(res);
          if (res.code == 0) {
              this.address = res.data.address,
              this.copyright = res.data.copyright,
              this.ipc = res.data.ipc,
              this.landline = res.data.landline,
              this.mobile = res.data.mobile,
              this.qr_code = res.data.qr_code,
              this.title = res.data.title,
              this.website_logo = res.data.website_logo,
              this.website_name = res.data.website_name
          } else {
          }
        });
      } catch (error) {}
    },
    // 表单提交
    async addForm() {
      if (this.form.wevsite_name=='' || this.form.user_name=='' || this.form.mobile=='' || this.form.text=='') {
        this.$alert('请填写完整信息', '次元跳跃', {
          confirmButtonText: '确定'
        });
      } else {
          try {
          console.log(this.form);
            const res = await addFormData(this.form).then(res=>{
              // console.log(res);
              if (res.code == 0) {
                this.$alert('提交成功,稍后将有专员联系您', '次元跳跃', {
                  confirmButtonText: '确定'
                });
                this.form={}
              } else {
                this.$alert(`${res.messge}`, '次元跳跃', {
                  confirmButtonText: '确定'
                });
              }
            })
        } catch (error) {}
      }
    },
  },
};
</script>

<style scoped lang="scss">
.footer {
  min-width: 1450px;
  height: 642px;
  .footer_wrap {
    background-color: #f9f9f9;
  }
  .form_container {
    width: 1450px;
    height: 303px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 47px 0 55px 0;
    .free {
      font-size: 46px;
      font-weight: bolder;
      text-align: center;
    }
    .phone {
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      margin-top: 17px;
      .phone_num {
        color: #004ea2;
      }
    }
    .form {
      margin-top: 54px;
      text-align: center;
      .input_item {
        margin-right: 21px;
        border: none;
        outline: none;
        width: 261px;
        height: 64px;
        padding-left: 26px;
        box-sizing: border-box;
      }
      .button {
        width: 176px;
        height: 64px;
        border: none;
        background-color: #004EA2;
        color: #fff;
      }
    }
  }

  .footer_info_container {
    background-color: #323232;
  }
  .footer_info {
    width: 1450px;
    margin: 0 auto;
    box-sizing: border-box;
    height: 339px;
    color: #fff;
    padding-top: 22px;
    display: flex;
    justify-content: space-evenly ;
    // display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
    align-items: center;
    .footer_left {
      float: left;
      font-size: 16px;
      .footer_title {
        margin-bottom: 44px;
      }
      .company_name,
      .company_phone,
      .address,
      .copyright {
        margin-bottom: 18px;
      }
    }
    // 高德地图
    .amap-wrapper {
      width: 500px;
      height: 220px;
    }
    .footer_right {
      margin-top: 30px;
      width: 370px;
      height: 154px;
      display: flex;
    //   display: -moz-box; /*Firefox*/
    // display: -webkit-box; /*Safari,Opera,Chrome*/
      .img_item {
        height: 71px;
        width: 177px;
        float: left;
        margin: 0 15px 12px 0;
      }
      .img_erweima {
        width: 300px;
        height: 154px !important;
        margin-right: 20px;
        background-repeat:no-repeat;
        background-size:cover;
        background-image:url(../assets/images/erweima.png);
      }
    }
  }
}
</style>